<template>
   <login-register>
       <div class="login-from-wrap">
           <div style="text-align:left; margin-bottom:1.1rem;">账户密码登录</div>
           <div ref="accountRef" class="login-group">
        <label for="account">手机号</label>
        <el-input
          id="account"
          v-model="phone"
          type="text"
          placeholder="请输入手机号"
          autocomplete="off"
          @keyup.enter="handleLoginEvent($event)"
        />
        <div class="login-group-tips">
          <!-- <Icon type="md-information-circle" size="16" /> -->
          <span>请输入手机号</span>
        </div>
      </div>
      <div ref="passwordRef" class="login-group">
        <label for="password">密码</label>

        <div class="login-group-input-wrap">
          <el-input
            id="password"
            v-model="password"
            autocomplete="off"
            placeholder="请输入密码"
            :type="eye?'password':'text'"
            @keyup.enter="handleLoginEvent($event)"
          />
        </div>
        <div class="login-group-tips">
          <!-- <Icon type="md-information-circle" size="16" /> -->
          <span>请输入密码</span>
        </div>
      </div>
      <div class="from-check">
        <el-checkbox v-model="remember">记住密码</el-checkbox>
        <el-link type="primary" href="#/password-reset">忘记密码</el-link>
      </div>
      <button ref="loginbtn" class="login-button" @click="handleLoginEvent($event)">登录</button>
      <div class="login-floor">
        <el-link type="primary" href="#/register">注册账户</el-link>
      </div>
       </div>
   </login-register>
</template>

<script>
import loginRegister from '../../components/loginRegister/index.vue';
export default {
    name: 'Login',
    components: { loginRegister },
    data() {
        return{
          // 账户
          phone: '',
          // 密码
          password: '',
          // 记住密码
          remember: false,
          // 查看密码
          eye: true,
          // 设置按钮为加载中状态
          loading: false,
        }
    },
    watch: {
    account() {
      this.$refs.accountRef.classList.remove('from-error');
    },
    password() {
      this.$refs.passwordRef.classList.remove('from-error');
    },
  },
    methods: {
       // 检测
      verifyContent() {
        const phone = this.phone.replace(/\s+/g, '');
        const password = this.password.replace(/\s+/g, '');
        let valid = true;
        if (!phone) {
          this.$refs.accountRef.classList.add('from-error');
          valid = false;
        }
        if (!password) {
          this.$refs.passwordRef.classList.add('from-error');
          valid = false;
        }
        return valid;
      },
      // 处理登录事件
      async handleLoginEvent(event) {
        const valid = this.verifyContent();
        const ripples = this.handleAnimation(event);
        if (!valid) {
          this.cancelAnimation(ripples);
          return;
        }
        //发送请求...
        var params = new Object();
        params.phone = this.phone;
        params.password = this.password;
        const {data: res} = await this.$http.post("/login",JSON.stringify(params));
        console.log(res.data.permissionList)
         if(res.success) {
           this.$message.success("登录成功！");
           //登录成功后，需要将token保存在sessionStorage中
           //token只能在当前网站打开期间生效，所以保存在session中
           window.sessionStorage.setItem("token", res.data.token);
           //当用户登录时，缓存登录用户的数据信息
            window.sessionStorage.setItem("user",JSON.stringify(res.data.userInfo));
            //保存用户权限
            window.sessionStorage.setItem("permissionList", JSON.stringify(res.data.permissionList));
           //跳转
           this.$router.push("/main");
         } else {
           this.$message.error(res.message);
         }
      },
      // 处理动画
      handleAnimation(event) {
        const x = event.offsetX;
        const y = event.offsetY;
        const ripples = document.createElement('span');
        ripples.style.left = `${x}px`;
        ripples.style.top = `${y}px`;
        this.$refs.loginbtn.appendChild(ripples);
        return ripples;
      },
      // 取消动画
      cancelAnimation(ripples) {
        setTimeout(() => {
          ripples.remove();
          this.loading = false;
        }, 1000);
      },
        
    }
}
</script>

<style scoped>
@import url('../../assets/css/login.css');
.from-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 1.2rem;
  user-select: none;
} 

</style>
<style >
.login-wrap .ivu-checkbox-checked .ivu-checkbox-inner {
  border-color: rgba(34, 47, 255, 0.33);
  background-color: rgb(34, 47, 255);
}
</style>
  
  